<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]"
          placeholder="请输入姓名"
        />
        <a-input hidden v-decorator="['id']"></a-input>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="职务">
        <a-select
          placeholder="请选择职务"
          v-decorator="['type', { rules: [{ required: true, message: '请选择职务' }] }]"
        >
          <a-select-option :value="item.dictValue" v-for="(item, index) in titleOption" :key="index">{{
            item.dictLabel
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
        <a-input-number
          :min="0"
          style="width: 100%"
          v-decorator="['sort', { rules: [{ required: true, message: '请输入排序' }] }]"
        />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="头像">
        <a-input hidden v-decorator="['imageUrl', { rules: [{ required: true, message: '请上传头像' }] }]"></a-input>
        <UploadImg v-model="imageUrl" cropper :width="100" :height="125" :cropperEnlarge="2" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="个人简介">
        <a-textarea :rows="5" v-decorator="['remarks']" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { dataType } from '@/api/system/system'
import { thinkTankAdd, thinkTankUpdate } from '@/api/web/biz'
import pick from 'lodash.pick'
import UploadImg from '@/components/UpFile/uploadImg'

export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      isload: true,
      loading: false,
      imageUrl: '',
      isEdit: false,
      isMaster: false,
      title: '',
      type: '',
      form: this.$form.createForm(this),
      titleOption: [],
    }
  },
  beforeCreate() {},
  created() {
    this.handletitleData()
  },
  watch: {
    imageUrl(nval){
      this.form.setFieldsValue({ imageUrl: nval })
    }
  },
  methods: {
    add(obj) {
      this.title = obj.title
      this.type = obj.type
      this.imageUrl = ''
      this.visible = true
      this.form.resetFields()
    },
    edit(obj) {
      this.title = obj.title
      this.type = obj.type
      this.imageUrl = ''
      this.visible = true
      this.form.resetFields()
      this.$nextTick(() => {
        this.imageUrl = obj.data.image
        obj.data.imageUrl = this.imageUrl
        this.form.setFieldsValue(pick(obj.data, 'id', 'name', 'type', 'remarks', 'imageUrl', 'sort'))
      })
    },

    // 获取职务
    handletitleData() {
      var params = {
        dictType: 'think_tank_type',
      }
      return dataType(params).then((res) => {
        this.titleOption = res.data
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = JSON.parse(JSON.stringify(values))
          params.image = this.imageUrl
          this.confirmLoading = true
          if (this.type === 'add') {
            return thinkTankAdd(params)
              .then((res) => {
                this.$message.success('新增成功')
                this.visible = false
                this.$emit('add')
              }).finally(() => {
                this.confirmLoading = false
              })
          } else {
            return thinkTankUpdate(params)
              .then((res) => {
                this.$message.success('编辑成功')
                this.visible = false
                this.$emit('upd')
              }).finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
  },
}
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.avatar-uploader > .ant-upload img {
  width: 86px;
  height: 86px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
